<template>
  <div class="house">
    <div class="pic">
      <img :src="'http://liufusong.top:8080' + houseList.houseImg" />
    </div>
    <div class="txt">
      <h3>{{ houseList.desc }}</h3>
      <p>{{ houseList.tags[0] }}</p>
      <p>{{ houseList.price }}元/月</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    houseList: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="less">
.house {
  //   background-color: pink;
  height: 120px;
  display: flex;
  .pic {
    width: 30%;
    // background-color: blue;
    img {
      width: 100%;
    }
  }
  .txt {
    padding: 15px 20px 10px 15px;
    h3 {
      font-size: 18px;
      color: #333;
      font-weight: normal;
    }
    p:nth-child(2) {
      display: inline-block;
      width: 40px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      border-radius: 2px;
      font-size: 12px;
      color: blue;
      margin: 5px 0;
    }
    p:nth-child(3) {
      font-size: 14px;
      color: red;
      font-weight: 700;
    }
  }
}
</style>
